<template>
  <div>
    <!-- 顶部导航 -->
    <van-nav-bar
      title="商品列表"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 搜索框 -->
    <van-search v-model="searchValue" :placeholder="theSearch" />
    <!-- 搜索排序 -->
    <ul class="search_sort">
      <li>综合</li>
      <li>销量</li>
      <li>价格</li>
    </ul>
    <!-- 商品列表 -->
    <goods-item-base v-for="item in searchList" :key="item.goods_id" :goodsMessage="item"></goods-item-base>
  </div>
</template>

<script>
import { getGoodsSearch } from '@/api/goodsSearch.js'
import GoodsItemBase from '@/components/GoodsItemBase.vue'
export default {
  components: { GoodsItemBase },
  data () {
    return {
      searchValue: '', // 用户搜索值
      searchList: [] // 用户搜索出的商品列表
    }
  },
  async created () {
    const { data: { list: { data } } } = await getGoodsSearch({
      goodsName: this.theSearch,
      page: 1
    })
    this.searchList = data
    // console.log(this.searchList)
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    }
  },
  computed: {
    // 网址栏的查询参数
    theSearch () {
      // console.log(this.$route.query)
      return this.$route.query.search
    }
  }
}
</script>

<style scoped>
/* 搜索排序 */
.search_sort {
  display:flex;
  text-align:center;
}
.search_sort li {
  padding:10px 20px;
  flex:1;
}
</style>
